<template>
  <div class="certificate-container">
    <!-- 顶部标题：增加图标增强识别性 -->
    <div class="cert-title">
      <i class="el-icon-s-home" style="margin-right: 10px; color: #e67e22;"></i>
      美食管理员信息展示
    </div>
    
    <!-- 内容容器：改为网格布局并增加装饰元素 -->
    <div class="content-grid">
      <!-- 信息区：优化列数与间距 -->
      <div class="info-wrapper">
        <!-- 信息面板：增加悬停动效 -->
        <div class="info-panel level-tag" @mouseenter="handleHover" @mouseleave="handleLeave">
          <div class="info-item">
            <span class="label">姓　名</span>
            <span class="value">李显荣</span>
          </div>
          <div class="info-item">
            <span class="label">学　号</span>
            <span class="value">2405550131</span>
          </div>
          <div class="info-item">
            <span class="label">职　级</span>
            <span class="value">学生</span>
          </div>
        </div>
        <div class="info-panel level-tag" @mouseenter="handleHover" @mouseleave="handleLeave">
          <div class="info-item">
            <span class="label">姓　名</span>
            <span class="value">罗洪</span>
          </div>
          <div class="info-item">
            <span class="label">学　号</span>
            <span class="value">2405550142</span>
          </div>
          <div class="info-item">
            <span class="label">职　级</span>
            <span class="value">学生</span>
          </div>
        </div>
        <div class="info-panel  level-tag" @mouseenter="handleHover" @mouseleave="handleLeave">
          <div class="info-item">
            <span class="label">姓　名</span>
            <span class="value">张元帅</span>
          </div>
          <div class="info-item">
            <span class="label">学　号</span>
            <span class="value">2405550116</span>
          </div>
          <div class="info-item">
            <span class="label">职　级</span>
            <span class="value">学生</span>
          </div>
        </div>
        <div class="info-panel level-tag" @mouseenter="handleHover" @mouseleave="handleLeave">
          <div class="info-item">
            <span class="label">姓　名</span>
            <span class="value">马凯成</span>
          </div>
          <div class="info-item">
            <span class="label">学　号</span>
            <span class="value">2405550111</span>
          </div>
          <div class="info-item">
            <span class="label">职　级</span>
            <span class="value">学生</span>
          </div>
        </div>
      </div>

      <!-- 装饰区：增加视觉平衡元素 -->
      <div class="decorate-area">
        <img src="../img/学校.png" alt="美食装饰" class="cert-img">
        <div class="decorate-text">滇西科技师范学院</div>
      </div>
    </div>

    <!-- 底部信息：优化排版与交互 -->
    <div class="footer-panel">
      <div class="footer-item">
        <span class="label">所属机构</span>
        <span class="value">滇西科技师范学院</span>
      </div>
      <div class="footer-item">
        <span class="label">监督电话</span>
        <span class="value">10086</span>
      </div>
      <div class="footer-item">
        <span class="label">更新日期</span>
        <span class="value">{{ formatDate() }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 日期格式化函数
    const formatDate = () => {
      const date = new Date();
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      });
    };
    
    // 面板悬停效果
    const handleHover = (e) => {
      e.currentTarget.style.borderColor = '#d35400';
      e.currentTarget.style.boxShadow = '0 10px 30px rgba(220, 180, 120, 0.2)';
    };
    
    const handleLeave = (e) => {
      e.currentTarget.style.borderColor = '#e67e22';
      e.currentTarget.style.boxShadow = '0 4px 16px rgba(220, 180, 120, 0.1)';
    };
    
    return {
      formatDate,
      handleHover,
      handleLeave
    };
  }
};
</script>

<style scoped>
/* 提取颜色变量，提升可维护性 */
:root {
  --primary-color: #d35400;
  --secondary-color: #e67e22;
  --bg-light: #fdf3e6;
  --bg-footer: #fff3e0;
}

/* 页面容器：优化间距与阴影 */
.certificate-container {
  max-width: 1200px;
  margin: 30px auto;
  padding: 40px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(220, 180, 120, 0.12);
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 标题样式：增强层次感 */
.cert-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary-color);
  text-align: center;
  margin-bottom: 36px;
  padding-bottom: 18px;
  border-bottom: 4px solid #ffe0b2;
  display: inline-block;
  position: relative;
}
.cert-title::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: var(--secondary-color);
  border-radius: 2px;
}

/* 内容 Grid 布局：优化比例与间距 */
.content-grid {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

/* 信息区容器：增强响应式能力 */
.info-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

/* 单个信息面板：增加交互动效 */
.info-panel {
  background: var(--bg-light);
  padding: 32px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(220, 180, 120, 0.1);
  transition: all 0.3s ease;
  border-top: 4px solid var(--secondary-color);
}
.info-panel:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(220, 180, 120, 0.15);
}
.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  position: relative;
  padding-left: 10px;
}
.info-item:last-child {
  margin-bottom: 0;
}
.info-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--secondary-color);
  opacity: 0.6;
}
.label {
  width: 100px;
  color: var(--secondary-color);
  font-weight: 600;
  font-size: 16px;
}
.value {
  color: #333;
  flex: 1;
  font-size: 16px;
}
.level-tag {
  color: var(--primary-color);
  font-weight: 700;
  font-size: 16px;
  border-radius: 4px;
  background: rgba(230, 126, 34, 0.1);
}

/* 装饰区样式：增强视觉平衡 */
.decorate-area {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.cert-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.decorate-area:hover .cert-img {
  transform: scale(1.05);
}
.decorate-text {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: white;
  font-weight: bold;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
  background: rgba(211, 84, 0, 0.7);
  padding: 8px 24px;
  border-radius: 30px;
}

/* 底部信息栏：优化排版与交互 */
.footer-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  background: var(--bg-footer);
  border-radius: 12px;
  box-shadow: inset 0 -2px 8px rgba(220, 180, 120, 0.1);
}
.footer-item {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(230, 126, 34, 0.2);
}
.footer-item:last-child {
  border-bottom: none;
}
.footer-item .label {
  min-width: 100px;
  color: var(--secondary-color);
  font-weight: 600;
}
.footer-item .value {
  color: #555;
  font-size: 16px;
}
</style>